<template>
	<div class="index-container">
		<div class="shop-top">
			<div class="w1200">
				<div class="fr">
					<router-link :to="`/shoplist`" title="融易装">
						<i class="el-icon-house" style="margin-right:5px;"></i>首页
					</router-link>
				</div>
				<div class="fl">
					<div class="sn-quick-menu">
						<div class="login"><img v-if="info.logo" :src="info.logo.path"
								alt="">{{info.name?info.name:'暂未设置'}}<i class="el-icon-arrow-down el-icon--right"></i>
						</div>
						<!-- <div class="sp-cart">客服服务<i class="el-icon-arrow-down"></i></div> -->
					</div>
				</div>
			</div>
		</div>

		<div class="header">
			<div class="headerLayout w1200">
				<div class="headerCon">
					<h1 class="mallLogo">
						<router-link :to="`/shoplist`" title="融易装">
							<img src="../img/ryzLogo.png">
						</router-link>
					</h1>
					<div class="mallSearch">
						<form action="" class="layui-form" novalidate>
							<input type="text" v-model="keyword" class="layui-input" placeholder="搜索关键字">
							<button class="layui-btn" @click="filterPops()">
								<i class="el-icon-search"></i>
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="content content-nav-base commodity-content">


			<div class="main-nav">
				<div class="inner-cont0">
					<div class="inner-cont1 w1200">
						<div class="category-types" style="">
							<h3>全部分类</h3>
						</div>
						<div class="inner-cont2">
							<router-link :to="`/nowlist`">选材中心</router-link>
							<router-link :to="`/orderlist`">我的订单</router-link>
							<router-link :to="`/nowadderss`">地址管理</router-link>
							<router-link :to="`/nowcart`">购物车</router-link>
						</div>
					</div>
				</div>
			</div>


			<div class="commod-cont-wrap">
				<div class="product-list-box" id="product-list-box">
					<div class="product-list-cont w1200">
						<div class="attr_filter">
							<h2>属性筛选</h2>
							<ul>
								<li>
									<dl>
										<dt>按分类筛选：</dt>
										<dd>
											<span :class="{'active': classifyIndex == ''}"
												@click="toggindex()">全部</span>
											<span v-for="(item,index) in classifyList" :key="index"
												:class="{'active': classifyIndex == item.cate_id}"
												@click="toggleNav(item)">{{item.cate_name}}</span>
										</dd>
									</dl>
								</li>
								<li v-if="classcont.length>0">
									<dl>
										<dt>按品牌筛选：</dt>
										<dd class="cate">
											<span :class="{active:store_id_lst==''}" @click="toggbaend()">全部</span>
											<span v-for="(items,index) in classcont" :key="index"
												:class="{'active':store_id_lst==items.id}"
												@click="barndkstchose(items.id)" v-if="items.store_name!=null">{{items.store_name}}</span>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt style="line-height:40px;">按综合筛选：</dt>
										<dd class="bottomcate">
											<span @click="ordertype('mix')"
												:class="'mix' == order_type ? 'active':''">销量<i
													class="el-icon-sort"></i></span>
											<span @click="ordertype('sale')"
												:class="'sale' == order_type ? 'active':''">综合<i
													class="el-icon-sort"></i></span>
											<span><input type="number" placeholder="最低价" placeholder-class="placeholder"
													v-model="minPrice" /><i>-</i><input type="number" placeholder="最高价"
													placeholder-class="placeholder" v-model="maxPrice" /><i
													class="catevb" @click="filterPops()">确定</i></span>
										</dd>
									</dl>
								</li>
							</ul>
						</div>
						<div class="product-item-box layui-clear">
							<div class="nocard" v-if="List.length == 0">
								<div class="divimg"><img src="../img/icon_gou.png" /></div>
								<span>暂无商品信息</span>
							</div>
							<div v-else class="list-item" v-for="(item,index) in List" :key="index"
								@click="todeatil(item.product_id)">
								<router-link :to="{path:'/shopdeatil',query: {product_id: item.product_id}}"><img
										:src="item.main_imgurl"></router-link>
								<p>{{item.product_title}}</p>
								<div class="price" v-if="item.cost_price">
									<span><i>底价 ￥</i>{{item.cost_price}}</span>
								</div>
								<div class="price">
									<del><i>售价 ￥</i>{{item.price}}</del><del style="padding-left:10px;"><i>原价
											￥</i>{{item.primary_price}}</del>
								</div>
							</div>
						</div>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pagesize"
							layout="sizes, prev, pager, next" :total="total">
						</el-pagination>
					</div>
				</div>
			</div>

		</div>


		<div class="footer">
			<div class="ng-promise-box">
				<div class="ng-promise w1200">
					<p class="text">
						<a class="icon1" href="javascript:;">7天无理由退换货</a>
						<a class="icon2" href="javascript:;">送货上门</a>
						<a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
					</p>
				</div>
			</div>
			<div class="mod_help w1200">
				<!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
				<p class="coty">融易装版权所有 &copy; 2012-2020</p>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '小刀',
				info: {},
				mobile: '',
				// 精选品牌
				brandList: [],
				List: [],
				currentPage: 1,
				pagesize: 20,
				total: 1,
				parentList: [],
				classifyIndex: '',
				classifyList: [],
				classcont: [],
				store_id_lst:'', //选中的品牌
				order_type: '', //销量排序：sale 综合排序：mix
				sale_type: 1,
				minPrice: '',
				maxPrice: '',
				storeIdIndex:'',//品牌选中样式
				keyword:'',
			}
		},
		mounted() {
			this.info = JSON.parse(localStorage.getItem('info'))
			this.mobile = localStorage.getItem('mobile')
			if (this.$route.query.cate_id) {
				this.classifyIndex = this.$route.query.cate_id
			}
			this.getDatalist()
			this.getDataparent()
			this.getBrand()
		},
		methods: {
			handleSizeChange(val) {
				this.pagesize = val
				this.currentPage = 1
				this.getDatalist()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getDatalist()
			},
			toggindex() {
				this.classifyIndex = ''
				this.currentPage = 1
				this.getDatalist()
			},
			toggbaend() {
				this.store_id_lst = [] //选中的品牌
				this.currentPage = 1
				this.getDatalist()
			},
			todeatil(product_id) {
				this.$router.push({
					name: 'shopdeatil',
					query: {
						product_id: product_id
					}
				})
			},
			//商品销量
			ordertype(type) {
				this.currentPage = 1
				if (this.order_type == type) {
					this.order_type = ''
					this.getDatalist()
				} else {
					this.order_type = type
					this.getDatalist()
				}
			},
			filterPops() {
				if (parseInt(this.maxPrice) < parseInt(this.minPrice)) {
					this.$message({
						message: '商品最低最小价格必须小于最大价格！',
						type: 'warning'
					})
					return
				}
				this.currentPage = 1
				this.getDatalist()
			},
			// 分类
			getDataparent() {
				this.$http.post('/api/admin/shopweb/cate/more', {}).then(res => {
					if (res.code == 1) {
						let cateList = res.data.cateLst // 分类数据（一级二级分类）
						let hotList = res.data.hotCate // 热门分类（二级分类，分类名称：热门）
						let nList = []
						this.classifyList = cateList
					}
				})
			},
			//品牌分类
			getBrand() {
				let data = {
					cate_id: this.classifyIndex
				}
				this.$http.post('/api/admin/shopweb/store/lists', data).then(res => {
					if (res.code == 1) {
						this.classcont = res.data.stores;
						console.log('qqqq',res.data.stores.length)
					}
				})
			},
			// 切换nav栏
			toggleNav(items) {
				if (this.classifyIndex == items.cate_id) {
					//this.classifyIndex = ''
					this.classcont = []
				} else {
					this.classifyIndex = items.cate_id
					this.classcont = items
				}
				this.store_id_lst='';
				this.currentPage = 1
				this.getDatalist()
			},
			barndkstchose(id) {
				// if (this.store_id_lst.includes(id)) {
				// 	this.store_id_lst = this.store_id_lst.filter(function(ele) {
				// 		return ele != id;
				// 	});
				// } else {
				// 	this.store_id_lst=id;
				// }
				if(id=='' || !id || id==0){
					this.store_id_lst='';
				}else{
					this.store_id_lst=id;
				}
				this.currentPage = 1
				this.getDatalist()
			},
			// 商品
			getDatalist() {
				
				this.$http.post('/api/admin/shopweb/product/lists', {
					page: this.currentPage,
					pagesize: this.pagesize,
					store_id_lst: this.store_id_lst,
					cateOne_id_lst: this.classifyIndex,
					minPrice: this.minPrice,
					maxPrice: this.maxPrice,
					order_type: this.order_type,
					keyword: this.keyword,
					sale_type: 1,
				}).then(res => {
					if (res.code == 1) {
						this.getBrand()
						let List = res.data
						this.total = List.count
						this.List = List.data
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	& /deep/ .content {
		padding: 0 !important;
	}

	@import '../css/index.less';
</style>
